import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, Tooltip } from 'antd';
import React, { useState } from 'react';

interface Props {
  /**最大添加次数 */
  max: number;
  /** true-只读 */
  isReadOnly?: boolean;
}

/**
 * 【全局未理解设置】
 * 配置话术流程>>全局设置
 */
export const GlobalNotUnderstood = ({ max, isReadOnly }: Props) => {
  const [maxNotUnderstood, setMaxNotUnderstood] = useState(max);
  return (
    <>
      {/* 未理解设置（最多3次） */}
      {/* 第1-2次未理解：(话术) */}
      <Form.List name={['globalNotUnderstood', 'notUnderstoodScripts']}>
        {(fields, { add, remove }) => (
          <>
            {!isReadOnly && (
              <Form.Item
                className="form-list-item-tit"
                label="全局未理解设置"
                style={{ flexDirection: 'row' }}
              >
                <Tooltip title={fields.length > 1 ? '最多3次未理解设置' : '添加未理解设置'}>
                  <Button
                    type="link"
                    onClick={() => {
                      // 添加未理解话术
                      setMaxNotUnderstood(maxNotUnderstood + 1);
                      add();
                    }}
                    disabled={fields.length > 1 ? true : false}
                  >
                    <PlusCircleOutlined className="form-list-btn-icon" />
                  </Button>
                </Tooltip>
              </Form.Item>
            )}
            {/* 循环体-内部 */}
            {fields.map((field, index) => (
              <div key={field.key} className="form-list-item-wrap unselect-words">
                <Form.Item
                  {...field}
                  className="form-list-item-ctn"
                  label={`第${index + 1}次未理解，则播放话术`}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      max: 500,
                      message: `请输入第${index + 1}次播放话术`,
                    },
                  ]}
                  required={!isReadOnly}
                  getValueFromEvent={event => {
                    return event.target.value.replace(/\s+/g, '');
                  }}
                >
                  <Input.TextArea
                    maxLength={500}
                    placeholder="请输入播放话术"
                    disabled={isReadOnly}
                  />
                </Form.Item>
                {!isReadOnly && (
                  <Tooltip title="删除设置">
                    {
                      <MinusCircleOutlined
                        className="form-list-btn-icon  btn-delete"
                        onClick={() => {
                          setMaxNotUnderstood(maxNotUnderstood - 1);
                          remove(field.name);
                        }}
                      />
                    }
                  </Tooltip>
                )}
              </div>
            ))}
          </>
        )}
      </Form.List>
      {/* 第3次未理解：挂机话术 */}
      <div className="form-list-last-item unselect-words">
        <Form.Item
          label={`第${maxNotUnderstood}次未理解，则执行挂机`}
          name={['globalNotUnderstood', 'notUnderstoodHangupScript']}
          className="form-list-item-ctn"
          rules={[
            {
              required: true,
              whitespace: true,
              max: 500,
              message: '请输入挂机话术',
            },
          ]}
          required={!isReadOnly}
        >
          <Input.TextArea maxLength={500} placeholder="请输入挂机话术" disabled={isReadOnly} />
        </Form.Item>
      </div>
    </>
  );
};
